iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

用vue.js寫出一個實用的科內分享網站系列 第 2

Day2安裝vue我選擇的是vue3!!

  • 分享至 

  • xImage
  •  

我的編譯器使用vscode在終端機下 vue create XXXX(檔案名稱)即可看到這個畫面 (要先安裝node.js 這邊就不多做贅述了XD)
再來這邊選擇 manually select features
https://ithelp.ithome.com.tw/upload/images/20210914/20141007nELMj7vUIi.jpg
把router選起來
https://ithelp.ithome.com.tw/upload/images/20210914/20141007BSvJMeqVs3.jpg
版本選擇vue 3 使用history model(之後會解釋)
https://ithelp.ithome.com.tw/upload/images/20210914/20141007VJAyIIE1l2.jpg
之後選擇ESLint with error prevention only
https://ithelp.ithome.com.tw/upload/images/20210914/20141007u2IsOSqB3O.jpg
Lint on save
https://ithelp.ithome.com.tw/upload/images/20210914/201410071LiPJ0L45G.jpg
In package.json
https://ithelp.ithome.com.tw/upload/images/20210914/20141007XBkcxQRaa4.jpg
Save this as a preset for feature projects 選擇NO
https://ithelp.ithome.com.tw/upload/images/20210914/20141007hfQ21xRNKx.jpg
再來就是等他跑~~~

完成後再終端機下這個指令npm run serve (千萬記得要進入剛創好的資料夾否則沒辦法開啟唷!)
預設的port是8080點進去就可以看到初始頁面
https://ithelp.ithome.com.tw/upload/images/20210914/20141007kVV7GwgFos.jpg
嘟嘟嚕這就是初始頁面
https://ithelp.ithome.com.tw/upload/images/20210914/201410075SRwgIbwZe.jpg
接下來讓我們進行一點小改造
把components下的helloword.vue刪除
並在views裡的home.vue修改一下

https://ithelp.ithome.com.tw/upload/images/20210914/201410078Rec2emHhg.jpg
嘟嘟嚕這就是剛開起來頁面的樣式
https://ithelp.ithome.com.tw/upload/images/20210914/20141007pcP7wS9I0e.jpg
再來去index.html改一下網站的名稱跟網站左上角的icon(將想要的照片存成.ico格式放在原照片路徑即可)
https://ithelp.ithome.com.tw/upload/images/20210914/201410076zo1rH1jma.jpg

嘟嘟嚕~~~這就是我們現在的網站樣式
https://ithelp.ithome.com.tw/upload/images/20210914/20141007UkRwnSARKP.jpg
今天的部分就差不多這樣了 明天開始先把版面設計好 然後再選擇要使用哪一個前端框架 目前在考慮要用bootstrap或vuetify 那就靜待明天的文章!!!!
我們明天見


上一篇
Day1為什麼要做網站勒?
下一篇
Day3大哥我錯了我選擇vue2
系列文
用vue.js寫出一個實用的科內分享網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言